<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/css3d.min.js"></script>
    <script type="text/javascript" src="../js/framework7.js"></script>
</head>
<body>
<div id="scene"></div>
<script type="text/javascript">
    var $$ = Dom7;
    //创建场景
    var s = new C3D.Stage();
    s.size(window.innerWidth, window.innerHeight).material({
        color: "#cccccc"
    });
    //s.camera.rotate(-30,0,0);
    s.update();
    $$('#scene').append(s.el);

    //创建一个三维容器（创建以方便分组使用）
    var sp = new C3D.Sprite();
    sp.position(0, 0, -500).update();
    s.addChild(sp);

    //创建20个平面放入容器，并定义鼠标事件
    var num = 20;
    var size = 100;
    var r = size/2/Math.tan(Math.PI/num);
    for (var i = 0; i < num; i++) {
        var angle = 360/num*i;
        var angleP = 2*Math.PI/num*i;
        var x = r*Math.sin(angleP);
        var z = r*Math.cos(angleP);

        var p = new C3D.Plane();
        p.size(100, 100, 100).position(x, 0, z).rotation(0,angle,0).material({
                color: C3D.getRandomColor()
            })
            .buttonMode(true)
            .update();
        sp.addChild(p);
        p.on("mouseover", function () {
            this.le.scale(1.1).update();
        });
        p.on("mouseout", function () {
            this.le.scale(1).update();
        });
    }
    //动画
    var animation = true;
    if (animation){
        requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame ||
            function (callback) {
                setTimeout(callback, 1000 / 60);
            };

        function go() {
            sp.rotate(0, 0.1, 0).updateT();
            // sp.move(0, 1, 0).update();

            // s.camera.move(0,0,-1).rotate(0,0.15,0);
            // s.update();

            requestAnimationFrame(go);
        }

        requestAnimationFrame(go);
    }


</script>
</body>
</html>